<template>
    <el-container class="container">
        <el-main class="main-container">
            <div class="response-container">
              <div v-if="!loading" class="message">
                <el-text tag="b" style="color: #050505;opacity: 1">{{resValue}}</el-text>
              </div>
              <div v-if="loading" class="message">
                <el-table v-loading="loading"
                          style="width: 100%;height: 550px"
                          element-loading-text="请求中..."
                          :element-loading-svg="svg"
                          class="custom-loading-svg"
                          element-loading-svg-view-box="-10, -10, 50, 50"
                >
                </el-table>
              </div>
            </div>
        </el-main>
        <el-footer class="footer-container">
          <div class="input-container">
            <el-input v-model="inputValue" style="width: 500px" placeholder="Please input" @keydown.enter="handleEnter"/>
            <el-button type="primary" style="margin-left: 10px" @click="answer()">回答</el-button>
          </div>
        </el-footer>
    </el-container>
</template>

<script setup>


import {ref} from "vue";
import myAxios from "../../../plugins/myAxios.js";
import {ElMessage} from "element-plus";

const inputValue = ref('');
const resValue = ref('请输入问题.....');

const loading = ref(false)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `


const handleEnter = () => {
  answer();
}

const answer = async () => {
  if(inputValue.value.trim() === ''){
    return ElMessage({
      type: 'warning',
      message: '请输入答疑内容',
    })
  }
  loading.value = true;
  const res = await myAxios.post('/answer/get/simple',{
    answerStr:inputValue.value
  },{timeout:30000})
  console.log(res);
  if(res.code === 0){
    resValue.value = res.data;
  }else{
    ElMessage.error(res.message);
  }
  loading.value = false;
}

</script>

<style scoped lang="less">
.container{
  overflow: hidden;
  border-radius: 4px;
  background-image: url("../../../assets/img/appearance/bg.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  //box-shadow: #8c939d;
}
.main-container{
  height: 700px;
  .response-container{
    width: 100%;
    height: 100%;
    background: #dbe2f6;
    box-shadow: #8c939d;
    opacity: 0.5;
    border-radius: 20px;
    .message{
      padding: 20px;
      color: #ffffff;
    }
  }
}
.footer-container{
  height: 100px;
  //background: #a8acaf;
  .input-container{
    width: 100%;
    height: 100%;
    margin-left: 350px;
    margin-top: 18px;
  }
}

.loading-overlay {
  width: 100%;
  background-color: rgba(187, 70, 70, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>